<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
<link rel="stylesheet" href="../../Content/css/validator.css"/>
</head>

<body>
<div class="container-fluid">
	<h3>表单验证</h3>
    <div id="form1" class="form-horizontal">
        <ul class="list-unstyled">
            <li>
                <div class="form-group">
                    <label class="col-md-2 control-label"><font color="red">*</font>为空验证</label>
                    <div class="col-md-4"><input type="text" class="form-control" id="input-validator"  /></div>
                    <div class="col-md-2">
                         <span class="alert alert-danger verify-tips " id="input-validatorTip"></span>
                    </div>
                </div>
            </li>
            <li>
                <div class="form-group">
                    <label class="col-md-2 control-label"><font color="red">*</font>数值验证</label>
                    <div class="col-md-4"><input type="text" class="form-control" id="num-validator"  /></div>
                    <div class="col-md-2">
                         <span class="alert alert-danger verify-tips " id="num-validatorTip"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
   	<h3>Html Code</h3>
    <div>
    	<pre>
            &lt;!--验证控件--&gt;
            &lt;input type="text" class="form-control" <font color="#FF0000">id="input-validator"</font>  /&gt;
            &lt;!--提示控件--&gt;
            &lt;!--提示控件ID为 验证控件ID+Tip--&gt;
            &lt;span class="alert alert-danger verify-tips " <font color="#FF0000">id="input-validatorTip"</font> &gt;&lt;/span&gt;
        </pre>
    </div>
    <h3>JS Code</h3>
    <div>
    	<pre>
            &lt;!--CSS 引用 用于控制提示部分的样式--&gt;
            &lt;link rel="stylesheet" href="../../Content/css/validator.css"/&gt;
            &lt;!--JS引用--&gt;
            &lt;script src="../../Scripts/formValidator-4.0.1.js"&gt;&lt;/script&gt;
            &lt;script src="../../Scripts/formValidatorRegex.js"&gt;&lt;/script&gt;
            
            &lt;!--调用实例--&gt;
            &lt;!--基本配置--&gt;
            $.formValidator.initConfig({
                formID: "form1",  
                debug: false, 
                submitOnce: true,
                onError: function (msg, obj, errorlist) {
                    alert(msg);
                }
            });
            &lt;!--提示配置--&gt;
            $("#input-validator").formValidator({
                 onShow: ""
                 ,onFocus: ""
                 ,onCorrect: "&nbsp;"  //如果为空就不提示
            }).inputValidator({
                  min: 1
                  ,onError: "不能为空"  //错误提示
            });
            &lt;!--其他实例--&gt;
            &lt;!--http://www.cnblogs.com/yelaiju/archive/2012/03/15/2398198.html--&gt;
            &lt;!--具体参数--&gt;
            &lt;!--http://shouce.jb51.net/phpcms/PHPCMS/formvalidator.html--&gt;
        </pre>
    </div>
</div>
<script type="text/javascript" src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/formValidator-4.0.1.js"></script>
<script src="../../Scripts/formValidatorRegex.js"></script>
<script>
	$(function(){
			$.formValidator.initConfig({
				formID: "form1", 
				debug: false, 
				submitOnce: true,
				onError: function (msg, obj, errorlist) {
					alert(msg);
				}
			});
			
			$("#input-validator").formValidator({
				 onShow: ""
				 ,onFocus: ""
				 ,onCorrect: "&nbsp;"
			}).inputValidator({
				  min: 1
				  ,onError: "不能为空"
			});
			
			 //数值验证
			$("#num-validator").formValidator({ 
				 onShow: ""
				 ,onFocus: ""
				 ,onCorrect: "&nbsp;"
			}).inputValidator({
				min: 1,
				max: 9999,
				type: "number"
				,onError: "输入错误"
			});
	})
</script>
</body>
</html>
